<template>
  <div v-cloak>
    <div class="formrightC">
      <div class="formrightC-tel">
        <div class="formrightC-tel-icon">
          <i class="iconfont icon-shouji"></i>
        </div>
        <div class="formrightC-tel-input">
          <mt-field label="" :attr="{maxlength:11}" placeholder="请输入11位手机号" v-model="formdata.tel" type="tel">
          </mt-field>
        </div>
      </div>
      <div style="overflow:hidden;padding-bottom:.1rem;">
        <div class="formrightC-code" style="width: 5.4rem;display:flex">
          <div class="formrightC-code-icon">
            <i class="iconfont icon-dunpai1"></i>
          </div>
          <div class="formrightC-password-input">
            <mt-field :attr="{maxlength:4}" placeholder="请输入4位验证码" type="text" v-model="formdata.password"></mt-field>
          </div>
        </div>
        <div style="oveflow:hidden;" @click="getImgCode" v-bind:class="{'getcodeA': flag, 'getcodeB': !flag}">{{codeTime}}</div>
      </div>
  
      <mt-button type="primary" @click="login">登录</mt-button>
    <div class="register-box" @click="linkRegister">注册</div>
      <!-- <p class="association">
        <span @click="iconChange">
          <i class="iconfont icon-goufangxianxing" v-if="iconShow"></i>
          <i class="iconfont icon-wugoufangxianxing" v-else></i>
        </span>&nbsp; 我已阅读
        <router-link to="/registerassociation">《水珠钱包注册协议》</router-link>
      </p> -->
    </div>
    <div class="verifycode-model" v-if="verifyShow">
      <div class="verifycode-model-inner">
        <div class="verifycode-model-inner-top">请输入图形验证码
          <i class="iconfont icon-guanbi" @click="closeModel"></i>
        </div>
        <div class="verifycode-model-inner-content">
          <input type="text" v-model="formdata.verifyCode" />
          <img :src="codePic" @click="verifyCode" />
        </div>
        <div class="verifycode-model-inner-footer" @click="startTime">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import { MessageBox,Indicator } from 'mint-ui';
export default {
  name: 'changecode',
  data() {
    return {
      formdata: {
        tel: '',
        password: '',
        verifyCode: ''
      },
      codeTime: '获取验证码',
      flag: true,
      iconShow: true,
      codePic: "/loansupermarket-app/img/getVerifyCode?num="+Math.random(),
      verifyShow: false
    }
  },
  watch: {
    formdata: {
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal, oldVal) {
        window.sessionStorage.setItem('tel',curVal.tel);
      },
      deep: true
    }
  },
  mounted(){
    this.formdata.tel = sessionStorage.phone || '';
  },
  methods: {
    // 获取图片验证码
    getImgCode() {
      this.formdata.verifyCode = '';
      if (this.formdata.tel == "") {
        MessageBox.alert('手机号码不能为空！', '提示');
        return;
      } else if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {
        MessageBox.alert('手机号码输入有误！', '提示');
        return;
      } else {
        // 重新获取验证码
        this.verifyCode();
        // 关闭模态框
        if (this.flag) {
          this.verifyShow = true;
        }
      }
    },
    // 获取验证码判断
    getCode() {
      if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {   //正则判断手机号码是否正确
        MessageBox('提示', '手机号码输入有误！');
        return
      }
      // 验证码60s
      this.flag = !this.flag;
      let time = 60;
      let that = this;
      if (!this.flag) {
        var timer = setInterval(function () {
          time -= 1;
          that.codeTime = time + 's后可重新获取';
          if (time == 0) {
            clearInterval(timer);
            that.codeTime = '获取验证码'
            that.flag = true;
          }
        }, 1000)
      };
      // 短信验证码post参数
      let postData = {
        phone: this.formdata.tel,
        smsType: 1,
        imgCode: this.formdata.verifyCode
      }
      // 获取短信验证码
      this.$http.get('/loansupermarket-app/sms/sendSmsByImg?phone='+postData.phone+'&smsType='+postData.smsType+"&imgCode="+postData.imgCode)
        .then((response) => {
          var resBody = response.body;
          if (resBody.code == '000') {
            
          } else {
            this.flag = !this.flag;
            if(resBody.msg){
              MessageBox.alert(resBody.msg, '提示');
            }
            
            clearInterval(timer);
            that.codeTime = '获取验证码'
          }
        })
    },
    // 关闭图形验证码模态框
    closeModel() {
      this.verifyShow = false;
    },
    // 启动获取验证码
    startTime(flag) {
      this.verifyShow = false;
      if(this.formdata.verifyCode.length==0){
        MessageBox.alert('请输入图形验证码', '提示');
        return;
      }
      if (flag) {
        this.getCode();
      }
    },
    // 是否勾选我已阅读《水珠钱包注册协议》
    iconChange() {
      this.iconShow = !this.iconShow;
    },
    // 登录
    login() {
      if (!this.iconShow) {
        MessageBox.alert('请先阅读水珠钱包注册协议！', '提示');
        return
      }
      // 登录接口参数
      let postData = {
        Vsign:1,
        phone: this.formdata.tel,
        code: this.formdata.password,
        channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):''
      }

      if (!this.formdata.tel) {
        MessageBox.alert('手机号码不能为空~', '提示');
        return;
      } else if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {
        MessageBox.alert('请输入正确的手机号码~', '提示');
      } else if (!this.formdata.password) {
        MessageBox.alert('验证码不能为空~', '提示');
      } else {
        // 登录接口
        Indicator.open('加载中...');
        this.$http.post('/loansupermarket-app/user/codeLogin', postData)
          .then((response) => {
            var resBody = response.body;
            // console.log(resBody)
            if (resBody.code == '000') {
              // TUDO 获取用户数据 如 头像
              // 存储用户上下文信息
              window.sessionStorage.setItem('nickname',resBody.data.nickName||'');
              window.sessionStorage.setItem('realName',resBody.data.name||'');
              window.sessionStorage.setItem('phone',resBody.data.phone||'');
              window.sessionStorage.setItem('idcardCode',resBody.data.idCard||'');
              window.sessionStorage.setItem('headImg',resBody.data.head_Img_Url||'/static/img/logo.png');

              // 查询支持储蓄卡
              this.$http.get('/loansupermarket-pay/card/bind/loadSupportBank?cardType=1').then(function(response){
                var resBody = response.body;
                if(resBody.code=='000'){
                  window.localStorage.setItem('bankList',JSON.stringify(resBody.data));
                }else{
                  MessageBox.alert(resBody.mesg)
                }
              })
              // 查询支持信用卡
              this.$http.get('/loansupermarket-pay/card/bind/loadSupportBank?cardType=2').then(function(response){
                var resBody = response.body;
                if(resBody.code=='000'){
                  window.localStorage.setItem('creditCardList',JSON.stringify(resBody.data));
                }else{
                  MessageBox.alert(resBody.mesg)
                }
              })

              //查询用户信息

              // 如果url带有platformId参数，那么跳转到贷款平台详情页，否则调到首页
              // if (this.$route.query.platformId) {
              //   this.$router.push({ path: '/loanplatformdetail', query: { platformId: this.$route.query.platformId, history: '1' } })
              // } else if(this.$route.query.id&&this.$route.query.index&&this.$route.query.status){
              //   // alert(1111111111);
              //   this.$router.push({path:'/loanplatformdetail?id='+this.$route.query.id+'&status='+this.$route.query.status+'&index='+this.$route.query.index})
              // }else if (this.$route.query.history && this.$route.query.history == 2) {
              //   this.$router.push({ path: '/main/mine' });
              // } else {
              //   this.$router.push({ path: '/main/home' });
              // }
              setTimeout(()=> {
                Indicator.close();
                if (this.$route.query.history == 1) {
                  this.$router.go(-1);
                }else{
                  this.$router.push({path:'/main/home',query:{activityShow:1}})
                }
                
              }, 500)
            } else {
              Indicator.close();
              MessageBox.alert(resBody.mesg, '提示');
            }
          })
      }

    },
    verifyCode() {
      // this.codePic = "http://106.14.97.38:8060/img/getVerifyCode?num="+Math.random();
      this.codePic = "/loansupermarket-app/img/getVerifyCode?num="+Math.random();
    },
    linkRegister(){
      this.$router.push({path:'/mainregister'});
    }
  }
}
</script>

<style lang="scss">
@import '../../scss/variable/base.scss';
.formrightC {
  padding-top: 0.35rem;
  width: 90%;
  margin: 0 auto;
  &-tel {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 4px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      flex: 1.2;
      margin-bottom: 2px;
      color: $iconColor;
    }
    &-input {
      flex: 10.8;
      margin-top: -0.05rem;
    }
  }
  &-code {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    float: left;
    overflow: hidden;
    border-radius: 4px;
    margin-top: 0.35rem;
    width: 5.4rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    &-icon {
      text-align: left;
      width: 20%; // vertical-align: 50%;
      margin-top: 3px;
      color: $iconColor;
      .iconfont {
        margin-left: 0.22rem;
      }
    }
    &-input {
      flex: 80%;
      text-align: left;
      margin-top: 0.2rem;
    }
  }

  .mint-button {
    margin-top: 1rem;
    float: left;
    width: 45%;
    height: 1.2rem;
    box-shadow:none;
  }
  .association {
    text-align: left;
    font-size: 0.33rem;
    margin-top: 0.3rem;
    i:nth-child(1) {
      color: #f15252;
      vertical-align: -3%;
      font-size: 0.36rem;
    }
    i:nth-child(2) {
      color: #f15252;
      vertical-align: -4%;
      font-size: 0.36rem;
    }
    a {
      color: $primaryColor;
      text-decoration: underline;
    }
  }
}

.register-box{
  float: right;
  width: 45%;
  height: 1.2rem;
  line-height: 1.2rem;
  border: 1px solid $primaryDeepColor;
  border-radius: 4px;
  color:$primaryDeepColor;
  font-size: .5rem;
}
.mint-cell-wrapper {
  background-image: none;
}

.mint-cell:last-child {
  background-image: none;
}

.mint-cell-wrapper {
  padding: 0 10px 0 0;
}

.getcodeA {
  overflow: hidden;
  float: right;
  width: 3.34rem;
  height: 48px; 
  background:-webkit-linear-gradient(left, #2ce9e8, #7dd7ff);
  display: inline-block;
  line-height: 47px;
  border-radius: 4px;
  margin-top: 0.35rem;
  font-size: 0.36rem;
  color: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}

.getcodeB {
  overflow: hidden;
  float: right;
  width: 3.34rem;
  height: 48px;
  background: $borderColor;
  display: inline-block;
  line-height: 47px;
  border-radius: 4px;
  margin-top: 0.35rem;
  font-size: 0.36rem;
  color: #fff;
  img {
    width: 100%;
    height: 100%;
  }
}

.verifycode-model {
  width: 100%;
  height: 100Vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  z-index: 11;
  text-align: left;
  top: 0;
  &-inner {
    border-radius: 0.12rem;
    overflow: hidden;
    width: 8rem;
    height: 5.3rem;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    &-top {
      width: 100%;
      height: 1.5rem;
      background: #d8fcff;
      font-size: 0.45rem;
      box-sizing: border-box;
      padding-left: 0.34rem;
      color: gary;
      padding-top: 0.25rem;
      text-align: center;
      line-height: 1rem;
      color: #000000;
      .iconfont {
        position: absolute;
        right: 0.34rem;
        top: 0.3rem;
        font-size: 0.6rem;
      }
    }
    &-content {
      box-sizing: border-box;
      padding: 0.8rem 0.4rem;
      input {
        width: 4.5rem;
        box-sizing: border-box;
        padding-left: 0.34rem;
        border: 1px solid #aaaaaa;
        outline: none;
        border-radius: 0.12rem;
        height: 1rem;
        float: left;
      }
      img {
        float: right;
        background: #d8fcff;
        width: 2.5rem;
        height: 1rem;
      }
    }
    &-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1.2rem; // background: $primaryColor;
      background: -webkit-linear-gradient(right, #37c4d2, #6be3e6) !important;
      width: 100%;
      text-align: center;
      font-size: 0.45rem;
      line-height: 1.2rem;
      color: #fff;
    }
  }
}

.formrightC-warning {
  width: 100%;
  color: $iconColor;
  font-size: 0.3rem;
  position: absolute;
  bottom: 0.3rem;
  text-align: center;
}
</style>


